<template>
	<view v-if="status" class="hot-area">
		<!--  #ifdef  H5 -->
		<lazy-img :imgUrl="hotImage" :coustomTop="900" @loaded="fixedHeight = false" imgMode="widthFix" :scrollTop="scrollTop" :class="{'h5-lazy-img': fixedHeight}"></lazy-img>
		<!--  #endif -->
		<!--  #ifdef  MP-WEIXIN -->
		<image :src="hotImage" mode="widthFix"></image>
		<!--  #endif -->
		<template v-for="(item, itemIndex) in clickAreaList">
			<view
					v-if="!item.login"
					class="click-area exposure"
					:key="itemIndex"
					@click="handleNav($event, item.linkType, item.linkValue, itemIndex)"
					:data-id="item.linkValue"  :data-index="itemIndex+1" :data-type="item.linkType" :data-moduleType="'pic_hot_area'" :data-moduleOrder="moduleOrder"
					:style="{
					height: item.height,
					width: item.width,
					left: item.left,
					top: item.top
				}"
			></view>
			<button
					v-else
					class="click-area exposure"
					:data-id="item.linkValue"  :data-index="itemIndex+1" :data-type="item.linkType" :data-moduleType="'pic_hot_area'" :data-moduleOrder="moduleOrder"
					:key="itemIndex"
					:style="{
					height: item.height,
					width: item.width,
					left: item.left,
					top: item.top
				}"
					hover-class="none"
					open-type="getUserInfo"
					@getuserinfo="handleNav($event, item.linkType, item.linkValue, itemIndex)"
			<!-- #ifdef H5 -->
			@click="handleNav($event, item.linkType, item.linkValue, itemIndex)"
			<!-- #endif -->
			>
			</button>
		</template>
	</view>
</template>

<script>
	import lazyImg from '@/common/lazyLoading/lazyLoadImg'
	export default {
		inject:['exposure'],
		data() {
			return {
				hotImage: '', // 背景图url
				clickAreaList: [], // 点击区域列表
				status: 0, // 显示状态。0不显示。1显示
				fixedHeight: true,
			}
		},
		components:{
			lazyImg
		},
		props:{
			initializationParams: String,
			pageId: {
				type: String,
				default: '1'
			},
			fragmentId: {
				type: [Number, String],
				default: ''
			},
			//来源模块在页面的排序序号
			moduleOrder: {
				type: [Number,String],
				default: 0
			},
			scrollTop: Number
		},
		watch:{
			initializationParams: {
				handler(initStr) {
					const initParam = JSON.parse(initStr)
					if (initParam.showTimeType == 2) { // 如果是设置时间段显示，则判断时间状态
						this.checkTime(initParam)
					} else { // 不设置时间，就直接显示
						this.status = 1
						this.initHotArea(initParam)
					}
				},
				immediate: true
			},
		},
		created() {
			try{
				this.exposure && this.exposure.push(this)
			}catch(e){
				//TODO handle the exception
			}
		},
		methods: {
			/**判断是否在时间段内
			 * @param {Object} initParam
			 */
			async checkTime(initParam) {
				const { sysTime } = await this.$utils.getNowTime();
				const nowTime = sysTime ? new Date(this.$utils.formatTime(sysTime)).getTime() : new Date().getTime()
				const startTime = new Date(this.$utils.formatTime(initParam.startTime)).getTime()
				const endTime = new Date(this.$utils.formatTime(initParam.endTime)).getTime()
				let countTime = 0
				if (startTime > nowTime) { // 未开始。设置倒计时间
					this.status = 0
					countTime = startTime - nowTime
				} else if (nowTime >= startTime && nowTime < endTime) { // 时间段内，显示。设置倒计时结束时间
					countTime = endTime - nowTime
					this.status = 1
					this.initHotArea(initParam)
				} else { // 已结束
					this.status = 0
				}
				countTime && setTimeout(() => { // 到倒计时时间重新计算
					this.checkTime(initParam)
				}, countTime)
			},
			initHotArea(initParam) {
				const loginUrl = ['/package_coupon/couponCenter', '/package_coupon/coupon']
				const loginType = ['120']//领取优惠券需要登录
				this.hotImage = initParam.hotImage
				const newHotZones = []
				initParam.zones.forEach(item => {
					item.width = item.widthPer * 100 + '%'
					item.height = item.heightPer * 100 + '%'
					item.top = item.topPer * 100 + '%'
					item.left = item.leftPer * 100 + '%'
					item.login = loginUrl.includes(item.linkValue) || loginType.includes(item.linkType)
					let isPush = true;
					if (item.pageType == '8') {
						//文惠券专区过滤
						isPush = false
					}
					// 过滤微信小程序中其他直播Banner 113是
					if (this.entrance == 'mp-weixin' && isPush) {
						if (!(item.linkType == 113 || item.linkType == 105) || item.linkValue.includes('m.migudm.cn')) {
							newHotZones.push(item);
						}
					} else {
						// 过滤微信小程序直播Banner
						if (item.linkType != 114 && isPush) {
							newHotZones.push(item);
						}
					}
				})
				this.clickAreaList = newHotZones
			},
			handleNav(e, type, value, i) {
				//1017为热区组件
				var statInfo = {'Ref_Module_Type':type,'Ref_Module_ID':'1017','Ref_Module_Order':this.moduleOrder,'Ref_Module_Inner_Order':i+1}
				if(type=='404'){
					this.$emit('upDataView')
					this.$utils.toast('活动还没开始，请耐心等待哦~')
				}else{
					try {
						this.exposure.handleClick(value);
					} catch (e) {
						//TODO handle the exception
					}
					if(type == "105"){//如果跳转外链，先曝光
						try {
							this.exposure.report();
						} catch (e) {
							//TODO handle the exception
						}
					}
					if (this.clickAreaList[i].login || this.clickAreaList[i].pageType == 4) {
						this.$Login.login({
							wxObj: e,
							success: () => {
								if(type == '120'){//领取优惠券
									if(this.clickAreaList[i].isHandle){
										this.$utils.toast('您领取的太频繁了，稍等一下再试试')
									}else{
										let receiveTime = parseInt(this.clickAreaList[i].receiveTime)*1000
										this.clickAreaList[i].isHandle = true
										setTimeout(()=>{
											this.clickAreaList[i].isHandle = false
										},receiveTime)
										this.$utils.handleLink(type, value, this.clickAreaList[i],{statInfo:statInfo},this.fragmentId);
										_handlePoint.call(this, type, value)
									}
								}else{
									this.$utils.handleLink(type, value, this.clickAreaList[i],{statInfo:statInfo},this.fragmentId);
									_handlePoint.call(this, type, value)
								}
							}
						})
					} else {
						this.$utils.handleLink(type, value, this.clickAreaList[i], {statInfo:statInfo},this.fragmentId);
						_handlePoint.call(this, type, value)
					}
				}

				function _handlePoint(linkType, value) {
					let postArr = ['101', '104', '105']
					if (postArr.includes(linkType)) {
						// 点击事件上报
						this.$MallStat.stat('click', {
							'Key_Type': 'Link',
							'Oper_Type': 1,
							'Key_Word': value
						})
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.hot-area{
		position: relative;
		line-height: 0;
		margin-top: -2rpx;
		.h5-lazy-img{
			min-height: 700rpx;
		}
		.click-area{
			padding: 0;
			position: absolute;
		}
	}
</style>
